<template>
  <div class="w-full max-w-[1500px] ml-auto mr-auto h-full flex p-[20px]">
    <div class="flex flex-col justify-center w-[150px]">
      <p>tips:</p>
      <ul>
        <li>1. reset camera 包含重置：PAN、ZOOM、FLIP_H/V</li>
        <li>2. reset properties 包含重置： invert colorMap window rotate</li>
      </ul>
    </div>
    <n-tabs justify-content="space-evenly" type="line" animated default-value="mpr-nifti">

      <n-tab-pane name="load-seg-net-surface" tab="load-seg-net-surface" display-directive="show:lazy">
        <div class="w-full h-full ml-auto mr-auto">
          <load-segment-from-net-surface/>
        </div>
      </n-tab-pane>



      <n-tab-pane name="load-seg-volume" tab="load-seg-volume" display-directive="show:lazy">
        <div class="w-full h-full ml-auto mr-auto">
          <load-segment-volume />
        </div>
      </n-tab-pane>


      <n-tab-pane name="stack-network" tab="stack-network" display-directive="show:lazy">
        <div class="w-full h-full ml-auto mr-auto">
          <single-stack-viewer-from-network />
        </div>
      </n-tab-pane>


      <n-tab-pane name="mpr-network" tab="mpr-network" display-directive="show:lazy">
        <div class="w-full h-full ml-auto mr-auto">
          <mpr-view-from-network />
        </div>
      </n-tab-pane>


      <n-tab-pane name="mpr-nifti" tab="mpr-nifti" display-directive="show:lazy">
        <div class="w-full h-full ml-auto mr-auto">
          <mpr-view-nifti />
        </div>
      </n-tab-pane>

    </n-tabs>
  </div>
</template>

<script setup lang="ts">
import { NTabs, NTabPane } from 'naive-ui'
import MprViewFromNetwork from '@/views/ImageViewer/components/mprView/MprViewFromNetwork.vue'
import SingleStackViewerFromNetwork from '@/views/ImageViewer/components/stackView/SingleStackViewerFromNetwork.vue'
import LoadSegmentFromNetSurface from '@/views/ImageViewer/components/segmentView/LoadSegmentFromNetSurface.vue'
import LoadSegmentVolume from '@/views/ImageViewer/components/segmentView/LoadSegmentVolume.vue'
import MprViewNifti from '@/views/ImageViewer/components/mprView/MprViewNifti.vue'
import { initTools } from "@/config/init.js";

initTools();

</script>
